<template>
  <el-card class="mb-5">
    <div class="flex justify-between items-center" slot="header">
      <SelectTime
        @handleChange="handleChange"
        @handleDate="handleDate"
      ></SelectTime>
      <div class="flex flex-col items-center">
        <div class="text-xl font-bold">
          <slot name="title"></slot>
        </div>
        <div class="text-sm font-normal text-gray-500">
          <slot name="remark"></slot>
        </div>
      </div>
    </div>
    <div
      id="user_chart"
      class="w-full "
      style="height:400px"
      ref="user_chart"
    ></div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

import SelectTime from "../selectTime/selectTime";

import { getUserBarData } from "@/api/dataPanel/userStatistic";

export default {
  name: "",
  data() {
    return {
      form: {
        date_tag: -1,
        start_date: "",
        end_date: ""
      },
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: ["霍克城堡", "抢糖果", "许愿流星"]
        },
        series: [
          {
            name: "次数",
            type: "bar",
            data: [0, 0, 0]
          },
          {
            name: "人数",
            type: "bar",
            data: [0, 0, 0]
          },
          {
            name: "投入金币数",
            type: "bar",
            data: [0, 0, 0]
          },
          {
            name: "产出金币数",
            type: "bar",
            data: [0, 0, 0]
          }
        ]
      }
    };
  },
  components: {
    SelectTime
  },
  computed: {
    user_chart() {
      return echarts.init(this.$refs["user_chart"]);
    }
  },
  created() {
    this.handleGetData();
  },
  mounted() {
    let that = this;
    this.drawline();
    window.addEventListener("resize", () => {
      that.user_chart.resize();
    });
  },
  methods: {
    async handleGetData() {
      const { data } = await getUserBarData(this.form);

      let active_name = [];
      let xAxis_game = [];
      let xAxis_people = [];
      let xAxis_input = [];
      let xAxis_output = [];
      data.reverse().forEach(item => {
        active_name.push(item.game_name);
        xAxis_game.push(item.game_count);
        xAxis_people.push(item.people_count);
        xAxis_input.push(item.input_gold);
        xAxis_output.push(item.output_gold);
      });

      this.user_chart.setOption({
        yAxis: { data: active_name },
        series: [
          { data: xAxis_game },
          { data: xAxis_people },
          { data: xAxis_input },
          { data: xAxis_output }
        ]
      });
    },
    handleChange(value) {
      this.form = value;
      this.handleGetData();
    },
    handleDate(value) {
      this.form = value;
      this.handleGetData();
    },
    drawline() {
      this.user_chart.setOption(this.option);
    }
  }
};
</script>
<style lang="scss" scoped></style>
